<template>
    <div class="order_deta">
        <div class="order_info">
            <img :src="cover" alt="" class="cover">
            <div class="order_info_other">
                <div class="order_name">{{ orderInfo.goods_name }}</div>
                <div class="order_price">¥{{ orderInfo.pay_amount }}</div>
                <div class="order_type">
                    <span>{{ orderInfo.status_text }}</span>
                    <span>x{{ orderInfo.quantity }}</span>
                </div>

            </div>
        </div>
        <div class="order_list">
            <div class="order_item" v-for="(item,index) in order_info" :key="index">
                <div class="key">{{ item.name }}：</div>
                <div class="value">{{ item.value}}</div>
            </div>
        
        </div>

        <!-- <div class="order_other">
            <div class="order_item">
                <div class="key">订单总额：</div>
                <div class="value">¥411.00</div>
            </div>
            <div class="order_item">
                <div class="key">实付金额：</div>
                <div class="value red">¥411.00</div>
            </div>
        </div> -->
    </div>
</template>
<script>
export default {
    props: {
        order_sn: {
            type: [String, Number],
            default: ""
        },
        type: String
    },
    data() {
        return {
            cover: "",
            orderInfo:{},
            order_info: [],

            form: {
                name: '111'
            }
        }
    },
    watch: {
        order_sn: {
            handler(value) {
                console.log(value)

                this.getDeta(value);
            },
            immediate: true
        }
    },

    methods: {
        async getDeta(order_sn) {
            let { order: res } = await this.$api.shopApi.orderDetail({
                order_sn
            });
            console.log(res)
            // res = res.data.order;
            this.orderInfo = res;
            this.cover = res.goods_images.length ? res.goods_images[0] : "";
            this.order_info = res.order_info;

            this.status = res.status;
            this.is_refund = res.is_refund;
            this.id = res.id;
        },
        onSubmit() {
            console.log('submit!');
        }
    }
}
</script>

<style lang="scss" scoped>
.order_deta {
    .order_info {
        display: flex;
        margin-bottom: 16px;

        .cover {
            width: 102px;
            height: 102px;
            border-radius: 10px;
        }

        .order_info_other {
            flex: 1;
            padding: 5px 12px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .order_name {
                font-size: 20px;
                font-weight: bold;
                color: #333333;
            }

            .order_price {
                font-size: 14px;
                color: #333333;
            }

            .order_type {
                font-size: 14px;
                color: #8F8F8F;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }
    }

    .order_list {
        border: 1px solid #EDEDED;
        padding: 16px;
        box-sizing: border-box;

        .order_item {
            margin-bottom: 12px;
            display: flex;

            &:last-child {
                margin-bottom: 0;
            }

            .key {
                font-size: 14px;
                color: #333333;
            }

            .value {
                font-size: 14px;
                color: #7F7F7F;
            }
        }
    }

    .order_other {
        padding-top: 24px;

        .order_item {
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            &:last-child {
                margin-bottom: 0;
            }

            .key {
                font-size: 14px;
                color: #333333;
            }

            .value {
                font-size: 14px;
                color: #333333;

                &.red {
                    font-weight: bold;
                    font-size: 24px;
                    color: #FF4140;
                }
            }
        }
    }
}
</style>